<script>
import ImageAvater from "../../../components/shiqinComponents/pageComponents/imageAvater.vue";
import Second_popup from "../../../components/shiqinComponents/shiqin_globalPopUps/second_popup.vue";
import First_popup from "../../../components/shiqinComponents/shiqin_globalPopUps/first_popup.vue";
import {setAuthority} from "../../../api/shiqinAPI";

export default {
  name: "membersList",
  components: {First_popup, Second_popup, ImageAvater},
  data() {
    return {
      info: {
      },
      permissionsList: [
        {
          name: '管理员',
          index: 0
        },
        {
          name: '仅查看',
          index: 1
        },
        {
          name: '移除人员',
          index: 2
        }
      ],
      selectIndex: 0,
      selectItem:{}
    }
  },
  props: {
    isSearch: {
      type: Boolean,
      default: false
    },
    margin: {
      type: String,
      default: '0 0 0 0'
    },
    title: {
      type: String,
      default: '发起人'
    },
    list: {
      type: Array,
      default: () => {
        return []
      }
    },
    index:{
      type:Number,
      default:0
    }
  },
  methods: {
    openPopup(index = 0,item = {}) {
      this.selectItem = item
      if (index == 0) {
        this.$refs.secondPopup.openPopup()
      } else {
        this.$refs.firstPopup.openPopup({
          title: '权限管理',
          maskClick: false,
          confirm: () => {
            setAuthority({
              family_id,
              member_id,
              type: this.selectIndex
            })
            this.$refs.firstPopup.closePopup()
          }
        })
      }
    }
  },
  mounted() {
    
  },
}
</script>

<template>
  <view class="membersList allColumnCenter" :style="{
    margin:margin
  }">
    <view class="membersList_content allColumnCenter">
      <view class="membersList_content_search allRowCenter" v-if="isSearch">
        <image class="membersList_content_search_image mr-8" src="/static/shiqin-images/search.png"></image>
        <text class="membersList_content_search_text">搜索</text>
      </view>
      <view class="membersList_content_title mt-17">
        <text class="membersList_content_title_text">{{ title }}</text>
      </view>
      <view class="membersList_content_list row items-center justify-between mt-28" v-for="(item,index) in list"
            :key="index">
        <view class="membersList_content_list_left row items-center">
          <image-avater :width="78" :height="78" :src="item.avatar"></image-avater>
          <view class="membersList_content_list_left_info ml-23">
            <view class="familyManagement_right_info_name row items-center">
              <text class="familyManagement_right_info_name_text">{{ item.username }}</text>
              <view class="familyManagement_right_info_name_remarks ml-5 allRowCenter" v-if="!!item.nickname">
                <text class="familyManagement_right_info_name_remarks_text">{{ item.nickname }}</text>
              </view>
              <image class="familyManagement_right_info_name_image ml-17" src="/static/shiqin-images/edit.png"
                     mode="widthFix"></image>
            </view>
            <view class="familyManagement_right_info_code mt-10">
              <text class="familyManagement_right_info_code_text">拾亲号：{{ item.sq_code }}</text>
            </view>
          </view>
        </view>
        <view class="membersList_content_list_right row items-center justify-between">
          <view class="membersList_content_list_right_view allRowCenter mr-26" @click.stop="openPopup(0,item)">
            <text class="membersList_content_list_right_view_text">查看</text>
          </view>
          <view v-if="index != 0" class="membersList_content_list_right_permissions allRowCenter" @click.stop="openPopup(1,item)">
            <text class="membersList_content_list_right_permissions_text">权限</text>
          </view>
        </view>
      </view>
    </view>

    <first_popup ref="firstPopup">
      <template>
        <view class="first_popup  row items-center">
          <image-avater :width="78" :height="78"></image-avater>
          <view class="membersList_content_list_left_info ml-23">
            <view class="familyManagement_right_info_name row items-center">
              <text class="familyManagement_right_info_name_text">{{ info.name }}</text>
              <view class="familyManagement_right_info_name_remarks ml-5 allRowCenter" v-if="!!info.remarks">
                <text class="familyManagement_right_info_name_remarks_text">{{ info.remarks }}</text>
              </view>
            </view>
            <view class="familyManagement_right_info_code mt-10">
              <text class="familyManagement_right_info_code_text">拾亲号：{{ info.code }}</text>
            </view>
          </view>
        </view>
        <view class="first_select row items-center justify-between" :style="index == permissionsList.length - 1?'border:none;':''"
              v-for="(item,index) in permissionsList" :key="index" @click="selectIndex = index">
          <text class="first_select_title">{{ item.name }}</text>
          <view class="first_select_radio" v-if="selectIndex == index">
          </view>
          <view class="first_select_border" v-else>
          </view>
        </view>
      </template>
    </first_popup>
    <second_popup ref="secondPopup"></second_popup>
  </view>
</template>

<style scoped lang="scss">
.membersList {
  width: 702rpx;
  padding: 17rpx 20rpx;
  background: #FFFFFF;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  overflow: hidden;

  .membersList_content {
    .membersList_content_search {
      width: 662rpx;
      height: 80rpx;
      background: #F5F5F5;
      border-radius: 21rpx;

      &_image {
        width: 25rpx;
        height: 25rpx;
      }

      &_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 26rpx;
        color: #B2B2B2;
      }
    }

    .membersList_content_title {
      width: 662rpx;

      .membersList_content_title_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #4B4B4B;
      }
    }

    .membersList_content_list {
      width: 662rpx;

      .membersList_content_list_left {
        .membersList_content_list_left_info {
          .familyManagement_right_info_name {
            &_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 28rpx;
              color: #292929;
            }

            .familyManagement_right_info_name_remarks {
              height: 30rpx;
              padding: 0 17rpx;
              background: #FF7950;
              border-radius: 15rpx 15rpx 15rpx 15rpx;

              &_text {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 16rpx;
                color: #FFFFFF;
              }
            }

            &_image {
              width: 30rpx;
            }
          }

          .familyManagement_right_info_code {
            &_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 22rpx;
              color: #4B4B4B;
            }
          }
        }
      }

      .membersList_content_list_right {
        .membersList_content_list_right_view {
          width: 98rpx;
          height: 38rpx;
          background: #4887FF;
          border-radius: 57rpx 57rpx 57rpx 57rpx;

          .membersList_content_list_right_view_text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 24rpx;
            color: #FFFFFF;
          }
        }

        .membersList_content_list_right_permissions {
          width: 98rpx;
          height: 38rpx;
          background: #FF4206;
          border-radius: 57rpx 57rpx 57rpx 57rpx;

          .membersList_content_list_right_permissions_text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 24rpx;
            color: #FFFFFF;
          }
        }
      }
    }
  }

  .first_popup {
    width: 555rpx;
    border-bottom: 1rpx solid #EBEBEB;
    padding: 32rpx 27rpx 20rpx 27rpx;

    .membersList_content_list_left_info {
      .familyManagement_right_info_name {
        &_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #292929;
        }

        .familyManagement_right_info_name_remarks {
          height: 30rpx;
          padding: 0 17rpx;
          background: #FF7950;
          border-radius: 15rpx 15rpx 15rpx 15rpx;

          &_text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 16rpx;
            color: #FFFFFF;
          }
        }

        &_image {
          width: 30rpx;
        }
      }

      .familyManagement_right_info_code {
        &_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 22rpx;
          color: #4B4B4B;
        }
      }
    }
  }

  .first_select {
    width: 516rpx;
    border-bottom: 1rpx solid #E8E8E8;
    padding: 32rpx 5rpx 18rpx 5rpx;

    .first_select_title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #4B4B4B;
    }

    .first_select_radio {
      width: 26rpx;
      height: 26rpx;
      border-radius: 13rpx 13rpx 13rpx 13rpx;
      border: 6rpx solid #FF4206;
    }

    .first_select_border {
      width: 26rpx;
      height: 26rpx;
      border-radius: 13rpx 13rpx 13rpx 13rpx;
      border: 2rpx solid #707070;
    }
  }
}
</style>